<template>
	<div class="side-nav">
		<h2>个人中心</h2>
		<ul @click="handleClick">
			<li v-for="v in navData" :class="[{ active: active == v.id }]" :key="v.id" :data-id="v.id" :data-route="v.route">
				<span :class="['iconfont', v.icon]"></span>
				{{ v.name }}
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data() {
		return {
			active: '1',
			navData: [
				{
					id: 1,
					name: '学习资料',
					icon: 'icon-course',
					route: 'learn-course'
				},
				// {
				//   id: 2,
				//   name: '我的班级',
				//   icon: 'icon-class',
				//   route: 'learn-classroom',
				// },
				// {
				//   id: 31,
				//   name: '我的作业',
				//   icon: 'icon-zuoye',
				//   route: 'homework',
				// },
				{
					id: 3,
					name: '考试记录',
					icon: 'icon-kaoshi',
					route: 'learn-exam'
				},
				// {
				// 	id: 4,
				// 	name: '我的练习',
				// 	icon: 'icon-lianxis',
				// 	route: 'learn-exercise'
				// },
				// {
				// 	id: 5,
				// 	name: '我的题集',
				// 	icon: 'icon-tiji',
				// 	route: 'learn-question'
				// }
				// {
				//   id: 6,
				//   name: '我的请假',
				//   icon: 'icon-qingjiaxiaojia',
				//   route: 'learn-leave',
				// },
				// {
				//   id: 7,
				//   name: '我的课时',
				//   icon: 'icon-keshi',
				//   route: 'class-hour',
				// },
				// {
				//   id: 8,
				//   name: '学习报告',
				//   icon: 'icon-baogao',
				//   route: 'learn-report',
				// },
			]
		};
	},
	mounted() {},
	methods: {
		handleClick(e) {
			this.active = e.target.getAttribute('data-id');
			let route = e.target.getAttribute('data-route');
			this.$router.push({ name: route });
		}
	}
};
</script>
<style scoped lang="scss">
.side-nav {
	border: 1px solid #ddd;
	h2 {
		font-size: 20px;
		color: #fff;
		text-align: center;
		height: 76px;
		line-height: 76px;
		background-color: var(--colorH1);
		border-bottom: 3px solid #f0bc1d;
	}
	ul {
		li {
			font-size: 16px;
			width: 100%;
			text-align: center;
			height: 60px;
			line-height: 60px;
			color: #333;
			cursor: pointer;
			border-bottom: 1px solid #eee;
			&:hover,
			&.active {
				background-color: var(--colorHover1);
			}
			span {
				color: #666;
				font-size: 20px;
				margin-right: 8px;
				&.icon-course {
					color: #de422e;
				}
				&.icon-class {
					color: #2ab150;
				}
				&.icon-kaoshi {
					color: #ed9420;
				}
				&.icon-zuoye {
					color: #1d80dc;
				}
				&.icon-lianxis {
					color: #d42619;
				}
				&.icon-tiji {
					color: #1450ca;
				}
				&.icon-qingjiaxiaojia {
					color: #de422e;
				}
				&.icon-keshi {
					color: #2ab150;
				}
				&.icon-baogao {
					color: #ed9420;
				}
			}
		}
	}
}
</style>
